<template>
  <div class="w-full flex">
    <div
      class="stem w-full inline-block text-333"
      style="white-space: break-spaces; word-break: break-all"
      v-html="stem"
    ></div>
  </div>
</template>

<script>
export default {
  inject: ['emit', 'props'],
  data() {
    return {}
  },
  computed: {
    stem() {
      const { index: questionIndex, data: stem } = this.props

      const { html = '', label = '' } = stem

      return html
        .replace(
          /<p[\w\W]*?>/,
          label
            ? `<p style=""><span class="question-type inline-block px-8px py-2px text-51C3FF">${label}</span> <span>${
                questionIndex != -1 ? questionIndex + 1 + '.' : ''
              }</span>`
            : `<p style=""><span>${questionIndex != -1 ? questionIndex + 1 + '.' : ''}</span>`
        )
        .replace(/<p/g, '<p class="paragraph"')
    }
  },
  watch: {
    stem() {
      this.$nextTick(() => MathJye.LayOut(document.body))
    }
  },
  mounted() {
    this.$nextTick(() => MathJye.LayOut(document.body))
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.stem {
  font-size: 26px;
  line-height: 28px;
}

/deep/ .stem {
  .question-type {
    font-size: 26px !important;
    background-color: rgba(81, 195, 255, 0.1);
    border-radius: 4px;
    line-height: 28px;
  }

  .paragraph {
    line-height: 34px;
    white-space: normal;

    &:first-child > br + img {
      margin-top: 10px;
    }

    &:not(:first-child) {
      margin-top: 10px;
    }

    audio {
      display: block;
      padding: 8px 0 0 0;
    }
  }

  .qml-sq {
    &:not(:first-child) {
      margin-top: 10px;
    }

    & > .qml-stem > br {
      display: none;
    }
  }

  table {
    margin: 10px 0;
  }
}
</style>
